<!DOCTYPE html> 
<html> 
<head> 
	<title>PLAYER!</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="./js/init.js"></script>
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
	<script src="./js/custom.js"></script>
</head> 

<body> 

<div data-role="page" id="signup">

	<script>
	//hide the close button
	$('#signup').live('pagecreate', function(event, ui) {
	 	$('#signup [data-icon="delete"]').hide();
	});
	</script>

  <div data-role="header">
    <h1>Sign up</h1>
  </div>
 
  <div data-role="content"> 
  	<div class="validateTips"></div> 
  	<form>
		<div data-role="fieldcontain">
			<label for="playername">Player's name</label> 
			<input type="text" name="playername" id="playername" /> 
		</div>
		<div data-role="fieldcontain">
			<label for="email">Email</label> 
			<input type="email" name="email" id="email" value="" />
		</div>
		<div data-role="fieldcontain">
			<label for="rankinglist">Ranking list</label>
			<select name="rankinglist" id="rankinglist">
				<option value="MEN" selected="selected">Men</option>
				<option value="WOMEN">Women</option> 
			</select> 
		</div>
	    <input type="button" id="signup_submit" value="Sign up" />
	</form>
  </div>
 <script>
$(document).ready(function() {

	var playername = $( "#playername" ); 
	var email = $( "#email" );
	var rankinglist = $( "#rankinglist" );
	var tips = $( ".validateTips" );
	tips.hide();

	function updateTips( t ) {
		tips.html(t).addClass( "ui-state-highlight" );
		tips.fadeIn("slow");
		//setTimeout(function() {
		//	tips.removeClass( "ui-state-highlight", 1500 );
		//}, 1500 );
	}

	function isNotEmpty( o, oname ) {
		if ( o.val().length < 1 ) {
			updateTips( "<b>"+oname + "</b> must not be empty." );
			highlight(o, true);
			return false;
		} else {
		  	highlight(o, false);
			return true;
		}
	}
	
	function highlight(o, highlight) {
		if (highlight) {
			$(o).attr("data-theme", "e").removeClass("ui-body-c").addClass("ui-body-e");
		} else {
			$(o).attr("data-theme", "c").removeClass("ui-body-e").addClass("ui-body-c");
		}	
	}

  $("#signup_submit").click(function() {
  	tips.hide();
  	var bValid = true;
	bValid = bValid && isNotEmpty(playername, "Player's name");
	bValid = bValid && isNotEmpty(email, "Email");
  	if (bValid) {
		$.ajax({
			type: "POST", 
		    url: "../rest/players",
		    data: {"playername":$("#playername").val(),"email":$("#email").val(),"rankinglist":$("#rankinglist").val()},
		    beforeSend: function(){
				$.mobile.showPageLoadingMsg(); //FIXME should be modal!
		    },
		    success: function(data, textStatus, XMLHttpRequest){
	        	cachePlayer(XMLHttpRequest.getResponseHeader('PlayerId'), $("#playername").val(), $("#email").val());
		    	$.mobile.hidePageLoadingMsg();
				$("<a href='welcomedialog.html' data-rel='dialog'></a>").click().remove();
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				$.mobile.hidePageLoadingMsg();

	        	var data = eval('(' + XMLHttpRequest.responseText + ')');
	        	var errorMessages = "";
				if (data.errors.error.length > 0) {
					$.each(data.errors.error, function(i, errorMessage) {
						errorMessages = errorMessages + "<b>Error</b>: " + errorMessage +
							"<br/>Please try again in a few seconds or report this problem to the developer: " +
							"<a href='mailto:dbestler@gmail.com?" + 
							"subject=Sign%20up%20failed&amp;" + 
							"body=Oh%20no!%0D%0A%0D%0ARegistration%20was%20not%20successful.%0D%0A%0D%0APlayername:%20" + $("#playername").val() + "%0D%0AEmail:%20" + $("#email").val() + "%0D%0ARankinglist:%20" + $("#rankinglist").val() + "'>Contact</a>";
					});
				}
				if (data.errors.playername.length > 0) {
					highlight(playername, true);
					$.each(data.errors.playername, function(i, playernameMessage) {
						errorMessages = errorMessages + "<b>Player's name</b>: " + playernameMessage +"<br/>";
					});
				}
				if (data.errors.email.length > 0) {
					highlight(email, true);
					$.each(data.errors.email, function(i, emailMessage) {
						errorMessages = errorMessages + "<b>Email</b>: " + emailMessage + "<br/>";
					});
				}
				if (data.errors.rankinglist.length > 0) {
					highlight(rankinglist, true);
					$.each(data.errors.rankinglist, function(i, rankinglistMessage) {
						errorMessages = errorMessages + "<b>Ranking list</b>: " + rankinglistMessage + "<br/>";
					});
				}
				updateTips(errorMessages);
	        	
	    	}
		});
	}
  });
});

</script>

</div>

</body>
</html>